<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单双向绑定</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="box">
        <input type="text" v-model="username">
        <!-- 复选框单个使用时,双向绑定一个布尔值 checkbox只有两种情况,true/false -->
        <input type="checkbox" v-model="isChecked">记住用户名
        <div>
            <!-- 复选框多个使用时, 双向绑定应为同一个数组,并设置value值,但该复选框被选中时,会自动向该数组中添加选中的value值 
                数组顺序为由该复选框选中的时间决定,因为是实时添加,删除的
            -->
            你喜欢的运动:{{favList}}<br/>
            <input type="checkbox" v-model="favList" value="篮球">篮球
            <input type="checkbox" v-model="favList" value="乒乓球">乒乓球
            <input type="checkbox" v-model="favList" value="足球">足球
            <button>提交</button>
        </div>
        <div>
            <!-- 单选框双向绑定时,绑定为同一个字符串变量,当单选发生改变时,会将该元素value重新赋值给绑定的字符串变量 -->
            你最喜欢的运动:{{picked}}<br/>
            <input type="radio" v-model="picked" value="篮球">篮球
            <input type="radio" v-model="picked" value="乒乓球">乒乓球
            <input type="radio" v-model="picked" value="足球">足球
            <button>提交</button>
        </div>
        <!-- 下拉列表双向绑定 绑定为一个字符串变量,注意默认是将value值赋给变量 如果没有value值是,是将option的内容赋给字符串变量-->
        <!-- 当v-model双向绑定一个下拉列表时,首次会根据data中的变量值显示 -->
        {{selected}}
        <select v-model="selected">
            <!-- 注意,默认的value中的值为字符串,如果想要更改为数字,最便捷的是将value的值设置为js底盘,动态绑定实现 -->
            <option value="" selected disabled hidden>全部订单</option>
            <option :value="0">未付款</option>
            <option :value="1">已取消</option>
            <option :value="2">已完成</option>
        </select>
    </div>
    <script>
        let obj = {
            data() {
                return {
                    username: '',
                    isChecked: false,
                    favList:[],
                    picked:'',
                    selected:'',
                }
            },
            
        }
        let app = Vue.createApp(obj).mount('#box')
    </script>
</body>
</html>